<template>
  <div class="fillcontain">
    <div class="table_container">
      <el-button type="primary" @click="jumpAddArticle" size="medium" style="margin-bottom: 10px">添加</el-button>
      <el-select v-model="selectArticleStatusValue" placeholder="请选择">
        <el-option
          v-for="item in optionsSelect"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>

      </el-select>
      <el-input
        placeholder="请输入文章名称"
        v-model="title"
        style="width: 200px;margin-left: 10px"
        clearable>
      </el-input>
      <el-button @click="getArticleList" type="primary" style="margin-left: 10px" size="medium">查询</el-button>
      <el-table
        :data="page.records"
        border
        highlight-current-row
        style="width: 100%">

        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="正文:">
<!--                <span>{{ props.row.content }}</span>-->
                <span v-html="props.row.content"></span>
              </el-form-item>

            </el-form>
          </template>
        </el-table-column>

        <el-table-column
          label="ID"
          prop="id"
          width="60"
        >
        </el-table-column>
        <el-table-column
          label="标题"
          prop="title">
        </el-table-column>
        <el-table-column
          label="摘要"
          prop="contentShort">
        </el-table-column>
        <el-table-column
          label="作者"
          prop="author">
        </el-table-column>
        <!--        <el-table-column-->
        <!--          label="级别"-->
        <!--          prop="power">-->
        <!--        </el-table-column>-->
        <!--        <el-table-column-->
        <!--          label="发布日期"-->
        <!--          prop="date">-->
        <!--          <template slot-scope="scope">-->
        <!--            <i class="el-icon-time"></i>-->
        <!--            <span style="margin-left: 10px">{{ getDateTime(scope.row.date) }}</span>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column
          label="发布时间"
          prop="createTime">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ getDateTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="所属社团"
        >
          <template>
            <span>{{ clubName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          prop="status">
          <template slot-scope="scope">
            <div class="name-wrapper">
              <el-tag size="medium" v-if="scope.row.status==0">待发布</el-tag>
              <el-tag type="success" size="medium" v-if="scope.row.status==1">已发布</el-tag>
              <el-tag type="warning" size="medium" v-if="scope.row.status==2">禁用</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="250"
        >
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="selectArticle(scope.row)">状态</el-button>
            <el-button @click="jumpEditArticle(scope.row.id)" type="primary" size="mini">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row.id)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="changeAdminList"
        :page-count="page.pages"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-select v-model="articleStatusValue" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="updateArticleStatus">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>
import {getDateTime1} from "../../../utils/dateTimeUtil";
import {
  auditArticle,
  deleteArticle,
  getArticlePageList,
  getArticlePageListWithoutHTML,
  updateArticle
} from "../../../api/article";
import {auditClub, auditStu} from "../../../api/club";

export default {
  name: "ArticleList",
  data() {
    return {
      clubId: null,
      clubName: null,
      pageList: null,
      page: {
        total: 100,
        current: 1,
        records: [],
        pages: 10,
      },
      AdminList: [],
      options: [{
        value: 0,
        label: '待发布'
      }, {
        value: 1,
        label: '已发布'
      }, {
        value: 2,
        label: '禁用'
      },],
      dialogVisible: false,
      selectedArticle: null,
      articleStatusValue: 0,
      selectArticleStatusValue: -1,
      optionsSelect: [{
        value: -1,
        label: '全部'
      }, {
        value: 0,
        label: '待发布'
      }, {
        value: 1,
        label: '发布'
      }, {
        value: 2,
        label: '禁用'
      },],
      //添加/修改对话框
      title: '',
      dialogFormVisible: false,
      condition: '',
      // 表单参数
      formData: {},
      formLabelWidth: '120px',
      rules: {
        // id: [
        //   {required: true, message: '请输入编号', trigger: 'blur'}
        // ],
        userName: [
          {required: true, message: '请输入用户名', trigger: 'blur'}
        ],
        name: [
          {required: true, message: '请输入姓名', trigger: 'blur'}
        ],
        association: [
          {required: true, message: '请输入选择所属组织', trigger: 'blur'},
        ],
        phone: [
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        password: [
          {required: true, message: '请输入用户名', trigger: 'blur'}
        ],

      }
    }
  },
  components: {},
  created() {
    this.clubId = this.$route.params.clubId;
    this.getArticleList();
  },
  methods: {
    selectArticle(val) {
      this.selectedArticle = val;
      this.dialogVisible = true;
      this.articleStatusValue = val.status;
    },
    updateArticleStatus() {
      this.dialogVisible = false;
      let temp = new Object();
      temp.id = this.selectedArticle.id;
      temp.status = this.articleStatusValue;
      updateArticle(temp).then(res => {
        this.getArticleList();
      })
    },
    changeAdminList(val) {
      console.log(val)
      this.page.current = val;
      this.getArticleList();
    },
    getArticleList() {
      getArticlePageListWithoutHTML({
      // getArticlePageList({
        clubId: this.clubId,
        status: this.selectArticleStatusValue,
        title: this.title,
        currentPage: this.page.current,
      }).then(res => {
        this.page = res.data.pageList;
        this.clubName = res.data.clubName;
        console.log(this.page.records)
      })
    },
    getDateTime(val) {
      return getDateTime1(val);
    },
    handleClose() {
      this.dialogVisible = false;
    },
    // 取消按钮
    cancel() {
      this.dialogFormVisible = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.formData = {
        id: undefined,
        name: undefined,
        username: undefined,
        power: undefined,
        phone: undefined,
        association: undefined
      }
      this.resetForm("formData");
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.dialogFormVisible = true;
      this.condition = "add";
    },
    jumpAddArticle() {
      this.$router.push({
        path: `/managerHome/addArticle`,
        name: 'addArticle',
        params: {
          clubId: this.clubId
        }
      })
    },
    /** 修改按钮操作 */

    jumpEditArticle(articleId) {
      // this.$router.push({path: `/editArticle/${articleId}`})
      this.$router.push({
        path: `/managerHome/editArticle`,
        name: 'editArticle',
        params: {
          articleId: articleId
        }
      })
    },
    handleDelete(index, id) {
      console.log("要删除的文章：", index, id);
      let temp = new Object();
      temp.id = id;
      this.$confirm('此操作将删除该' + id + '管理员, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteArticle(
          temp
        ).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            location.reload();
          } else {
            this.$message({
              type: 'error',
              message: '删除失败'
            });
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

  },
}
</script>
<style Lang="less" scoped>
.table_container {
  padding: 20px;
}

.Pagination {
  display: flex;
  justify-content: flex-start;
  margin-top: 8px;
}

.demo-table-expand {
  margin-left: 30px;
}
.el-form-item__label{
  //font-size: 20px;
  //color: #0084ff;
}
</style>
